<template>
  <view class="container">
    <!-- 未登录状态 -->
    <view class="not-login" v-if="!isLoggedIn">
      <view class="login-card">
        <image
          class="login-bg"
          src="/static/login-bg.jpg"
          mode="aspectFill"
        ></image>
        <view class="login-content">
          <text class="login-title">登录摸鱼派</text>
          <text class="login-desc">登录后可以享受更多功能和服务</text>
          <button class="login-btn" @click="goToLogin">立即登录/注册</button>
        </view>
      </view>
    </view>

    <!-- 已登录状态 - 全新设计 -->
    <view class="profile-new" v-else>
      <!-- 顶部背景 -->
      <view class="top-bg">
        <!-- 用户自定义背景图 -->
        <image
          class="user-bg-image"
          :src="userInfo.cardBg || '/static/profile-bg.jpg'"
          mode="aspectFill"
        ></image>
        <view class="top-bg-overlay"></view>
      </view>

      <!-- 用户卡片 -->
      <view class="user-card">
        <!-- 用户基本信息 -->
        <view class="user-card-header">
          <image
            class="avatar"
            :src="userInfo.userAvatarURL"
            mode="aspectFill"
          ></image>
          <view class="user-info">
            <view class="name-row">
              <text class="nickname">{{
                userInfo.userNickname || userInfo.userName
              }}</text>
              <view v-if="userInfo.userRole" @click="navigateToArticle()">
                <rich-text :nodes="getRoleImage(userInfo.userRole)"></rich-text>
              </view>
            </view>
            <view class="user-meta">
              <text class="username">@{{ userInfo.userName }}</text>
              <text class="user-no" v-if="userInfo.userNo"
                >第 {{ userInfo.userNo }} 号成员</text
              >
            </view>

            <!-- 用户额外信息 -->
            <view
              class="user-extra"
              v-if="userInfo.mbti || userInfo.userURL || userInfo.userCity"
            >
              <view
                class="extra-item"
                v-if="userInfo.mbti"
                @click="openMbtiLink(userInfo.mbti)"
              >
                <FeatherIcon name="user" size="14" color="#666"></FeatherIcon>
                <text>{{ userInfo.mbti }}</text>
              </view>
              <view
                class="divider"
                v-if="userInfo.mbti && (userInfo.userCity || userInfo.userURL)"
              ></view>
              <view class="extra-item" v-if="userInfo.userCity">
                <FeatherIcon
                  name="map-pin"
                  size="14"
                  color="#666"
                ></FeatherIcon>
                <text>{{ userInfo.userCity }}</text>
              </view>
              <view
                class="divider"
                v-if="userInfo.userCity && userInfo.userURL"
              ></view>
              <view
                class="extra-item link"
                v-if="userInfo.userURL"
                @click="openExternalLink(userInfo.userURL)"
              >
                <FeatherIcon
                  name="external-link"
                  size="14"
                  color="#3498db"
                ></FeatherIcon>
                <text>主页</text>
              </view>
            </view>
          </view>
          <view class="scan-btn" @click="handleScanWebLogin">
            <FeatherIcon
              name="maximize"
              size="20"
              color="#ff9800"
            ></FeatherIcon>
          </view>
        </view>

        <!-- 用户简介 -->
        <view class="user-intro" v-if="userInfo.userIntro">
          <text>{{ userInfo.userIntro }}</text>
        </view>

        <!-- 用户勋章 -->
        <view class="user-medals" v-if="medals.length > 0">
          <view class="section-header">
            <view class="section-title">
              <FeatherIcon name="award" size="16" color="#f59e0b"></FeatherIcon>
              <text>勋章墙</text>
            </view>
            <view
              class="section-action"
              v-if="medals.length > 5"
              @click="toggleExpand"
            >
              <text>{{ isExpanded ? "收起" : "展开" }}</text>
              <FeatherIcon
                :name="isExpanded ? 'chevron-up' : 'chevron-down'"
                size="16"
                color="#666"
              ></FeatherIcon>
            </view>
          </view>
          <view class="medals-list" :class="{ 'medals-expanded': isExpanded }">
            <view
              class="medal-item"
              v-for="(medal, index) in medals"
              :key="index"
              @click="showMedalDescription(medal)"
            >
              <img :src="medal.url" :title="medal.description" />
            </view>
          </view>
        </view>

        <!-- 数据统计 -->
        <view class="user-stats">
          <view class="stat-item">
            <text class="stat-value highlight">{{
              userInfo.userPoint || 0
            }}</text>
            <text class="stat-label">积分</text>
          </view>
          <view class="stat-item">
            <text class="stat-value">{{
              userInfo.followingUserCount || 0
            }}</text>
            <text class="stat-label">关注</text>
          </view>
          <view class="stat-item">
            <text class="stat-value">{{ userInfo.followerCount || 0 }}</text>
            <text class="stat-label">粉丝</text>
          </view>
          <view class="stat-item">
            <text class="stat-value">{{ userInfo.onlineMinute }}</text>
            <text class="stat-label">总在线/分钟</text>
          </view>
        </view>
      </view>

      <!-- 功能菜单卡片 -->
      <view class="feature-card">
        <view class="feature-grid">
          <view
            class="feature-item"
            @click="
              navigateTo(`/pages/user/articles?userName=${userInfo.userName}`)
            "
          >
            <view class="feature-icon">
              <FeatherIcon
                name="file-text"
                size="28"
                color="#ff9800"
              ></FeatherIcon>
            </view>
            <text class="feature-name">我的帖子</text>
          </view>

          <view
            class="feature-item"
            @click="navigateTo('/pages/notification/notification')"
          >
            <view class="feature-icon">
              <FeatherIcon name="bell" size="28" color="#ff9800"></FeatherIcon>
              <view class="badge" v-if="unreadCount > 0">{{
                unreadCount
              }}</view>
            </view>
            <text class="feature-name">消息通知</text>
          </view>

          <view class="feature-item" @click="handleCheckUpdate">
            <view class="feature-icon">
              <FeatherIcon
                name="refresh-cw"
                size="28"
                color="#ff9800"
              ></FeatherIcon>
              <view class="badge update" v-if="hasNewVersion"></view>
            </view>
            <text class="feature-name">检查更新</text>
          </view>

          <view class="feature-item" @click="handleAboutApp">
            <view class="feature-icon">
              <FeatherIcon name="info" size="28" color="#ff9800"></FeatherIcon>
            </view>
            <text class="feature-name">关于APP</text>
          </view>
        </view>
      </view>

      <!-- 退出登录按钮 -->
      <button class="logout-btn" @click="handleLogout">退出登录</button>
    </view>
    <!-- 更新弹窗 -->
    <UpdateModal
      :visible="showUpdateModal"
      :version-info="versionInfo"
      :download-status="updateDownloadStatus"
      :download-progress="updateDownloadProgress"
      @download="handleStartDownload"
      @install="handleInstallUpdate"
      @cancel="handleUpdateCancel"
    />

    <!-- 自定义弹窗 -->
    <view class="custom-modal" v-if="showCustomModal">
      <view class="modal-overlay" @click="closeCustomModal"></view>
      <view class="modal-content">
        <view class="modal-body">
          <view class="modal-icon">
            <FeatherIcon
              name="alert-triangle"
              size="48"
              color="#ff9800"
            ></FeatherIcon>
          </view>
          <text class="modal-message"
            >版本检查服务器位于境外，当前网络环境无法访问</text
          >
          <text class="modal-submessage"
            >请确保已开启代理或VPN后再尝试检查更新</text
          >
        </view>
        <view class="modal-footer">
          <button class="modal-btn" @click="closeCustomModal">我知道了</button>
        </view>
      </view>
    </view>

    <!-- 退出登录确认框 -->
    <view class="logout-confirm" v-if="logoutConfirmVisible">
      <view class="confirm-overlay" @click="cancelLogout"></view>
      <view class="confirm-content">
        <view class="confirm-body">
          <view class="confirm-icon">
            <FeatherIcon
              name="alert-triangle"
              size="48"
              color="#ff9800"
            ></FeatherIcon>
          </view>
          <text class="confirm-message">确定要退出登录吗？</text>
        </view>
        <view class="confirm-footer">
          <button class="confirm-btn cancel" @click="cancelLogout">
            再想想
          </button>
          <button class="confirm-btn confirm" @click="confirmLogout">
            确定
          </button>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from "vue";
import { onShow } from "@dcloudio/uni-app";
import {
  showLoading,
  hideLoading,
  showError,
  showSuccess,
  showConfirm,
  genMetal,
  getRoleImage,
} from "@/utils/common.js";
import { chooseAndUploadImage } from "@/utils/upload";
import api from "@/api";
import { isLoggedIn, clearApiKey, getApiKey } from "@/api";
import FeatherIcon from "@/components/FeatherIcon.vue";
import UpdateModal from "@/components/UpdateModal.vue";
import updateUtils from "@/utils/updateUtils.js";
import { getAppVersion } from "@/config/app";
import wsManager from "@/utils/websocket";

// 用户信息
const userInfo = ref({});
// 未读消息数量
const unreadCount = ref(0);
const currentVersion = getAppVersion(); // 从配置获取当前应用版本号
const showUpdateModal = ref(false);
const versionInfo = ref({});
const hasNewVersion = ref(false);
// 更新下载状态和进度
const updateDownloadStatus = ref("not_started");
const updateDownloadProgress = ref(0);
// 自定义弹窗显示状态
const showCustomModal = ref(false);
// 退出登录相关状态
const logoutConfirmVisible = ref(false);

// 勋章展开状态
const isExpanded = ref(false);

// 切换勋章展开/收起状态
const toggleExpand = () => {
  isExpanded.value = !isExpanded.value;
};

// 处理用户勋章数据
const medals = computed(() => {
  if (!userInfo.value || !userInfo.value.sysMetal) return [];

  try {
    const metalData = JSON.parse(userInfo.value.sysMetal);
    if (!metalData || !metalData.list || !Array.isArray(metalData.list))
      return [];

    return metalData.list
      .filter((medal) => medal.enabled)
      .map((medal) => {
        // 每次重新生成URL，确保使用最新的API密钥
        const url = genMetal(medal.name, medal.attr);
        return {
          name: medal.name,
          description: medal.description || "",
          url,
          attr: medal.attr,
        };
      });
  } catch (error) {
    console.error("解析勋章数据失败:", error);
    return [];
  }
});

// 显示勋章描述
const showMedalDescription = (medal) => {
  uni.showModal({
    title: medal.name,
    content: medal.description || "暂无描述",
    showCancel: false,
    confirmText: "确定",
  });
};

// 跳转到摸鱼派会员等级规则详情帖子页
const navigateToArticle = () => {
  uni.navigateTo({
    url: `/pages/article/detail?id=1630575841478`,
  });
};
// 获取用户信息
const getUserInfo = async () => {
  if (!isLoggedIn()) return;

  try {
    //showLoading("加载中");

    const res = await api.user.getCurrentUser();

    if (res.code === 0) {
      userInfo.value = res.data;

      // 保存用户信息到本地缓存，供反馈等功能使用
      try {
        uni.setStorageSync("userInfo", JSON.stringify(res.data));
      } catch (e) {
        console.error("保存用户信息失败:", e);
      }
    } else {
      showError(res.msg || "获取用户信息失败");
    }
  } catch (error) {
    console.error("获取用户信息失败", error);
  } finally {
    hideLoading();
  }
};

// 获取未读消息数量
const getUnreadCount = async () => {
  if (!isLoggedIn()) return;

  try {
    const res = await api.notification.getUnreadCount();

    if (res.code === 0) {
      // 处理通知数据
      if (Array.isArray(res.data)) {
        // 计算未读通知数量
        unreadCount.value = res.data.filter(
          (notification) => !notification.hasRead
        ).length;
      } else {
        // 备用处理，兼容旧API
        unreadCount.value = res.unreadNotificationCnt || 0;
      }
    }
  } catch (error) {
    console.error("获取未读消息数量失败", error);
  }
};

// 跳转到登录页
const goToLogin = () => {
  uni.navigateTo({
    url: "/pages/login/login",
  });
};

// 页面导航
const navigateTo = (url) => {
  uni.navigateTo({
    url,
  });
};

// 处理关于APP
const handleAboutApp = () => {
  uni.navigateTo({
    url: "/pages/user/about",
  });
};

// 处理退出登录
const handleLogout = async () => {
  // 显示自定义退出登录确认框
  logoutConfirmVisible.value = true;
};

// 确认退出登录
const confirmLogout = () => {
  // 清除本地存储
  clearApiKey();
  showSuccess("已退出登录");
  logoutConfirmVisible.value = false;

  // 刷新页面
  setTimeout(() => {
    uni.reLaunch({
      url: "/pages/login/login",
    });
  }, 100);
};

// 取消退出登录
const cancelLogout = () => {
  logoutConfirmVisible.value = false;
};

// 开始下载更新
const handleStartDownload = () => {
  updateUtils.startDownload();
};

// 安装更新
const handleInstallUpdate = () => {
  updateUtils.installUpdate();
  showUpdateModal.value = false;
};

// 取消更新
const handleUpdateCancel = () => {
  showUpdateModal.value = false;
};

// 初始化检查更新功能
const initUpdateCheck = () => {
  // 先检查是否有新版本显示角标
  checkUpdateAvailable();

  // 设置更新回调函数
  updateUtils.setCallbacks({
    onCheckStart: () => {
      // 只有在用户主动点击检查更新时才显示加载提示
      if (updateUtils.isUserInitiated) {
        showLoading("检查更新中");
      }
    },
    onCheckComplete: (hasUpdate, version, error, isUserInitiated) => {
      hideLoading();
      if (error && !hasUpdate && isUserInitiated) {
        showError("检查更新失败");
      } else if (!hasUpdate && isUserInitiated) {
        // 只有用户主动检查时才提示已是最新版本
        showSuccess("当前已是最新版本");
      }
    },
    onUpdateAvailable: (versionData) => {
      hasNewVersion.value = true;
      versionInfo.value = versionData;
    },
    onDownloadStart: () => {
      updateDownloadStatus.value = "downloading";
      updateDownloadProgress.value = 0;
    },
    onDownloadProgress: (data) => {
      updateDownloadProgress.value = data.progress;
    },
    onDownloadComplete: (filePath, error) => {
      if (filePath) {
        updateDownloadStatus.value = "completed";
      } else {
        updateDownloadStatus.value = "not_started";
        uni.showToast({
          title: "下载更新失败，请重试",
          icon: "none",
        });
      }
    },
  });
};

// 异步检查是否有新版本，用于显示角标
const checkUpdateAvailable = async () => {
  try {
    const result = await updateUtils.checkUpdate(true);
    hasNewVersion.value = result.hasUpdate;
  } catch (error) {
    console.error("检查更新状态失败：", error);
  }
};

// 处理检查更新点击
const handleCheckUpdate = () => {
  if (hasNewVersion.value) {
    showUpdateModal.value = true;
    updateDownloadStatus.value = updateUtils.getDownloadStatus();
  } else {
    // 设置为用户主动检查
    updateUtils.isUserInitiated = true;
    updateUtils.checkUpdate(true);
  }
};

// 关闭自定义弹窗
const closeCustomModal = () => {
  showCustomModal.value = false;
};

// 处理头像上传
const handleAvatarUpload = () => {
  // 检查是否已登录
  if (!isLoggedIn()) {
    showError("请先登录");
    return;
  }

  chooseAndUploadImage({
    count: 1,
    loadingText: "头像上传中...",
    successText: "头像上传成功",
  })
    .then(async (imageUrl) => {
      try {
        showLoading("更新头像中...");
        // 调用更新头像API
        const res = await api.user.updateAvatar(imageUrl);
        if (res.code === 0) {
          showSuccess("头像更新成功");
          // 更新本地用户信息
          userInfo.value.userAvatarURL = imageUrl;
          // 更新本地缓存的用户信息
          try {
            uni.setStorageSync("userInfo", JSON.stringify(userInfo.value));
          } catch (e) {
            console.error("保存用户信息失败:", e);
          }
        } else {
          showError(res.msg || "头像更新失败");
        }
      } catch (error) {
        console.error("更新头像失败:", error);
        showError("更新头像失败，请重试");
      } finally {
        hideLoading();
      }
    })
    .catch((error) => {
      console.error("上传头像失败:", error);
    });
};

// 处理扫码登录网页
const handleScanWebLogin = () => {
  // 检查是否已登录
  if (!isLoggedIn()) {
    showError("请先登录");
    return;
  }

  // 调用扫码API
  uni.scanCode({
    onlyFromCamera: false, // 允许从相册选择图片
    scanType: ["qrCode"], // 只扫描二维码
    success: async (res) => {
      const result = res.result;
      console.log("扫码结果:", result);

      if (result.startsWith("web:")) {
        const targetId = result.split(":")[1];
        if (!targetId) {
          showError("无效的网页登录二维码");
          return;
        }

        try {
          showLoading("处理中");

          // 初始化WebSocket连接
          wsManager.init();

          // 等待连接建立
          let connectionTimeout = 0;
          while (!wsManager.isConnected && connectionTimeout < 30) {
            await new Promise((resolve) => setTimeout(resolve, 100));
            connectionTimeout++;
          }

          if (!wsManager.isConnected) {
            throw new Error("WebSocket连接超时");
          }

          // 获取本地存储的token
          const apiKey = getApiKey();
          if (!apiKey) {
            console.log("未登录，不建立 WebSocket 连接");
            return;
          }

          // 步骤1：发送连接请求
          await wsManager.send({
            type: 3,
            targetId: targetId,
          });

          // 等待一小段时间确保第一个消息发送成功
          await new Promise((resolve) => setTimeout(resolve, 500));

          // 步骤2：发送API Key验证
          await wsManager.send({
            type: 2,
            targetId: targetId,
            apiKey: apiKey,
          });

          showSuccess("登录成功");

          // 延迟关闭WebSocket连接
          setTimeout(() => {
            wsManager.close();
          }, 1000);
        } catch (error) {
          console.error("扫码登录失败:", error);
          showError(error.message || "登录失败，请重试");
          wsManager.close();
        } finally {
          hideLoading();
        }
      } else {
        showError("无效的二维码");
      }
    },
    fail: (err) => {
      console.error("扫码失败:", err);
      // 检查是否是用户主动取消
      if (err.errMsg && err.errMsg.includes("cancel")) {
        console.log("用户取消扫码");
        return;
      }
      showError("扫码失败，请重试");
    },
  });
};

// 打开外部链接
const openExternalLink = (url) => {
  if (!url) return;

  // 在H5环境中直接打开链接
  //#ifdef H5
  window.open(url, "_blank");
  //#endif

  // 在App环境中使用系统浏览器打开
  //#ifdef APP-PLUS
  plus.runtime.openURL(url);
  //#endif
};

// 打开MBTI链接
const openMbtiLink = (mbti) => {
  if (!mbti) return;

  // 提取MBTI前四个字母（如ENFP-T中的ENFP）
  const leftMbti = mbti.split("-")[0];
  const mbtiUrl =
    "https://www.16personalities.com/ch/" + leftMbti + "-%E4%BA%BA%E6%A0%BC";

  openExternalLink(mbtiUrl);
};

onMounted(() => {
  if (isLoggedIn()) {
    getUserInfo();
    getUnreadCount();
    initUpdateCheck(); // 初始化检查更新功能
  }
});

onShow(() => {
  if (isLoggedIn()) {
    getUnreadCount();
  }
});
</script>

<style lang="scss">
.container {
  background-color: #f8f9fa;
  min-height: 100vh;
}

.not-login {
  padding: 40rpx;

  .login-card {
    position: relative;
    height: 300rpx;
    border-radius: 16rpx;
    overflow: hidden;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);

    .login-bg {
      position: absolute;
      width: 100%;
      height: 100%;
      z-index: 0;
    }

    .login-content {
      position: relative;
      z-index: 1;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 0 40rpx;
      background: linear-gradient(
        to right,
        rgba(0, 0, 0, 0.6),
        rgba(0, 0, 0, 0.4),
        rgba(0, 0, 0, 0)
      );
    }

    .login-title {
      font-size: 40rpx;
      font-weight: bold;
      color: #fff;
      margin-bottom: 20rpx;
    }

    .login-desc {
      font-size: 28rpx;
      color: rgba(255, 255, 255, 0.9);
      margin-bottom: 40rpx;
    }

    .login-btn {
      width: 250rpx;
      height: 80rpx;
      line-height: 80rpx;
      font-size: 28rpx;
      color: #007aff;
      background-color: #fff;
      border-radius: 40rpx;

      &:after {
        border: none;
      }
    }
  }
}

.profile-new {
  .top-bg {
    height: 260rpx;
    position: relative;
    overflow: hidden;

    .user-bg-image {
      position: absolute;
      width: 100%;
      height: 100%;
      z-index: 0;
    }

    .top-bg-overlay {
      position: absolute;
      width: 100%;
      height: 100%;
      z-index: 1;
      background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.2),
        rgba(0, 0, 0, 0.5)
      );
    }
  }

  .user-card {
    margin: -80rpx 30rpx 30rpx;
    background-color: #fff;
    border-radius: 16rpx;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
    overflow: hidden;
    position: relative;
    z-index: 2;

    .user-card-header {
      padding: 25rpx;
      position: relative;
      display: flex;
      border-bottom: 1rpx solid #f5f5f5;

      .avatar {
        width: 130rpx;
        height: 130rpx;
        border-radius: 50%;
        border: 4rpx solid #fff;
        box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
        margin-right: 24rpx;
      }

      .scan-btn {
        position: absolute;
        top: 25rpx;
        right: 25rpx;
        width: 60rpx;
        height: 60rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #f9f9f9;
        border-radius: 30rpx;
        box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

        &:active {
          background-color: #f0f0f0;
        }
      }

      .user-info {
        flex: 1;
        overflow: hidden;
      }

      .name-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        margin-bottom: 6rpx;

        .nickname {
          font-size: 34rpx;
          font-weight: bold;
          color: #222;
          margin-right: 12rpx;
        }

        .user-role {
          display: inline-flex;
          align-items: center;
          padding: 4rpx 12rpx;
          background-color: rgba(255, 152, 0, 0.1);
          border-radius: 20rpx;
          margin-top: 4rpx;

          text {
            font-size: 22rpx;
            color: #ff9800;
            margin-right: 4rpx;
          }
        }
      }

      .user-meta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        margin-bottom: 12rpx;

        .username {
          font-size: 24rpx;
          color: #666;
          margin-right: 12rpx;
        }

        .user-no {
          font-size: 22rpx;
          color: #3498db;
          background-color: rgba(52, 152, 219, 0.1);
          padding: 2rpx 10rpx;
          border-radius: 12rpx;
        }
      }

      .user-extra {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        margin-top: 6rpx;

        .extra-item {
          display: flex;
          align-items: center;
          font-size: 22rpx;
          color: #666;

          text {
            margin-left: 6rpx;
          }

          &.link {
            color: #3498db;
          }
        }

        .divider {
          width: 1rpx;
          height: 20rpx;
          background-color: #ddd;
          margin: 0 12rpx;
        }
      }
    }

    .user-intro {
      padding: 20rpx 25rpx;
      font-size: 26rpx;
      color: #666;
      line-height: 1.6;
      border-bottom: 1rpx solid #f5f5f5;
    }

    .user-medals {
      padding: 20rpx 25rpx;
      border-bottom: 1rpx solid #f5f5f5;
    }

    .section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16rpx;

      .section-title {
        display: flex;
        align-items: center;

        text {
          font-size: 26rpx;
          color: #333;
          font-weight: 500;
          margin-left: 8rpx;
        }
      }

      .section-action {
        display: flex;
        align-items: center;
        font-size: 22rpx;
        color: #666;
        padding: 4rpx 12rpx;
        background-color: #f5f5f5;
        border-radius: 24rpx;

        text {
          margin-right: 6rpx;
        }
      }
    }

    .medals-list {
      display: flex;
      flex-wrap: wrap;
      max-height: 80rpx;
      overflow: hidden;
      transition: all 0.3s ease;
    }

    .medals-list.medals-expanded {
      max-height: 500rpx;
    }

    .medal-item {
      margin-right: 16rpx;
      margin-bottom: 16rpx;
      padding: 6rpx;
      transition: all 0.2s ease;

      &:active {
        transform: scale(0.95);
      }
    }

    .user-stats {
      display: flex;
      padding: 20rpx 10rpx;

      .stat-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;

        .stat-value {
          font-size: 32rpx;
          font-weight: bold;
          color: #333;
          margin-bottom: 6rpx;

          &.highlight {
            color: #ff9800;
          }
        }

        .stat-label {
          font-size: 22rpx;
          color: #999;
        }
      }
    }
  }

  .feature-card {
    margin: 0 30rpx 30rpx;
    background-color: #fff;
    border-radius: 24rpx;
    box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.1);
    overflow: hidden;
    padding: 20rpx 0;
  }

  .feature-grid {
    display: flex;
    flex-wrap: wrap;

    .feature-item {
      width: 25%;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 30rpx 0;
      transition: all 0.2s ease;

      &:active {
        transform: scale(0.95);
      }

      .feature-icon {
        width: 100rpx;
        height: 100rpx;
        background-color: rgba(255, 152, 0, 0.1);
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 16rpx;
        position: relative;
        transition: all 0.3s ease;
        box-shadow: 0 4rpx 12rpx rgba(255, 152, 0, 0.15);

        .badge {
          position: absolute;
          top: 0;
          right: 0;
          min-width: 36rpx;
          height: 36rpx;
          line-height: 36rpx;
          text-align: center;
          font-size: 20rpx;
          color: #fff;
          background-color: #ff4d4f;
          border-radius: 18rpx;
          padding: 0 10rpx;
          transform: translate(30%, -30%);

          &.update {
            width: 12rpx;
            height: 12rpx;
            min-width: 12rpx;
            padding: 0;
            background-color: #ff4d4f;
            border-radius: 50%;
            animation: blink 1.5s infinite;
          }
        }
      }

      .feature-name {
        font-size: 26rpx;
        color: #333;
      }
    }
  }

  .logout-btn {
    margin: 20rpx 50rpx 60rpx;
    height: 90rpx;
    line-height: 90rpx;
    font-size: 32rpx;
    color: #ff4d4f;
    background-color: #fff;
    border-radius: 45rpx;
    box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;

    &:active {
      transform: translateY(2rpx);
      box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.08);
    }

    &:after {
      border: none;
    }
  }
}

@keyframes blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.custom-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;

  .modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1;
  }

  .modal-content {
    position: relative;
    z-index: 2;
    width: 80%;
    max-width: 600rpx;
    background-color: #fff;
    border-radius: 16rpx;
    overflow: hidden;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.2);
    animation: modalFadeIn 0.3s ease-out;
  }

  .modal-body {
    padding: 40rpx 30rpx;
    text-align: center;

    .modal-icon {
      margin-bottom: 20rpx;
    }

    .modal-message {
      display: block;
      font-size: 30rpx;
      color: #333;
      line-height: 1.5;
      margin-bottom: 16rpx;
    }

    .modal-submessage {
      display: block;
      font-size: 26rpx;
      color: #999;
      line-height: 1.5;
    }
  }

  .modal-footer {
    padding: 20rpx 30rpx 30rpx;
    text-align: center;

    .modal-btn {
      width: 100%;
      height: 80rpx;
      line-height: 80rpx;
      font-size: 30rpx;
      color: #fff;
      background-color: #ff9800;
      border-radius: 40rpx;
      border: none;

      &:after {
        border: none;
      }
    }
  }
}

@keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: translateY(20rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.logout-confirm {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;

  .confirm-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 1;
    backdrop-filter: blur(3px);
  }

  .confirm-content {
    position: relative;
    z-index: 2;
    width: 85%;
    max-width: 650rpx;
    background-color: #fff;
    border-radius: 20rpx;
    overflow: hidden;
    box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.25);
    animation: modalFadeIn 0.3s ease-out;
  }

  .confirm-body {
    padding: 50rpx 40rpx 30rpx;
    text-align: center;

    .confirm-icon {
      margin-bottom: 30rpx;
      display: flex;
      justify-content: center;

      .feather-alert-triangle {
        color: #ff9800;
      }
    }

    .confirm-message {
      display: block;
      font-size: 34rpx;
      color: #333;
      font-weight: 500;
      line-height: 1.5;
    }
  }

  .confirm-footer {
    display: flex;
    justify-content: space-between;
    padding: 20rpx 40rpx 40rpx;

    .confirm-btn {
      width: 45%;
      height: 90rpx;
      line-height: 90rpx;
      font-size: 32rpx;
      font-weight: 500;
      color: #fff;
      border-radius: 45rpx;
      border: none;
      transition: all 0.2s ease;

      &:after {
        border: none;
      }

      &.cancel {
        background-color: #f5f5f5;
        color: #666;

        &:active {
          background-color: #e0e0e0;
        }
      }

      &.confirm {
        background: linear-gradient(135deg, #ff9800, #ff5722);
        box-shadow: 0 4rpx 10rpx rgba(255, 87, 34, 0.3);

        &:active {
          transform: translateY(2rpx);
          box-shadow: 0 2rpx 5rpx rgba(255, 87, 34, 0.3);
        }
      }
    }
  }
}

@keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: translateY(20rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>
